<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试</title>
</head>
<body>
    <h1>网页内容</h1>

    <div class="receive">网页中接收到的消息</div>

    <input type="text" placeholder="向应用侧发送的消息" class="message">
    <button class="send">发送</button>

    <script>
        // 根据选择器查询dom元素
        const $ = s => document.querySelector(s)

        // 网页端的端口
        let port = undefined

        /* 与应用侧双向通信 */
        // 注册 window 的 message 事件监听，用于接收消息
        window.addEventListener('message', (event) => {
            // 如果是应用侧将初始化端口发送到网页中来，则网页中先初始化
            if (event.data === '__init_port__') {
                port = event.ports[0]

                // 通过应用侧发送过来的端口，注册事件监听，用于接收应用侧向网页发送的消息
                port.onmessage = (event) => {
                    // event.data 中保存了从应用侧向网页中发送的数据内容
                    const msg = event.data
                    $('.receive').innerHTML = `网页中接收到的消息: ${msg}`
                }
            }
        })

        // 点击发送按钮，从网页侧向应用侧发送消息
        // 调用端口的 postMessage() 方法发送消息即可
        $('.send').onclick = () => {
            port.postMessage($('.message').value)
        }
    </script>

    <script>
        function changeBgColor() {
            document.body.style.backgroundColor = '#cccccc'
        }
    </script>
    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
    <script>
        // VConsole 默认会挂载到 `window.VConsole` 上
        var vConsole = new window.VConsole();

        setTimeout(() => {
            vConsole.setSwitchPosition(100, 200)
        }, 1000)
    </script>
</body>
</html>